Markdown คืออะไร

Markdown คือภาษาชนิดหนึ่งที่เป็นข้อความธรรมดา แต่สามารถทำให้ Text กลายเป็นภาษา HTML ได้โดยที่ไม่ต้องเขียน Code HTML ให้ยุ่งยาก นอกจากนี้ Markdown ถูกสร้างขึ้นมาเพื่อให้ใช้งานง่าย อ่านเข้าใจได้ง่าย ถึงแม้ผู้ใช้งานจะไม่มีความรู้เรื่อง Programming หรือ Code HTML ก็สามารถใช้ Markdown ในการเขียนบล็อกเว็บไซต์ได้อย่างง่ายดาย

เรามาเริ่มทำความรู้จักกับ Markdown กันเลยครับ

หัวข้อ (Header)

# Header1
## Header2
### Header3
#### Header4
##### Header5
###### Header6

Output Header

Number List

1. แบบเรียงลิสต์ (Sort Number)

1. Sunday
2. Monday
3. Tuesday
4. Wednesday
5. Thursday
6. Friday
7. Saturday

2. แบบไม่เรียงลิสต์ (Not Sort Number)

Markdown แบบไม่เรียงลิสต์ สามารถใส่เลขแบบไม่ต้องเรียงกันก็ได้ แต่ว่า Markdown จะเรียงเลขให้อัตโนมัติโดยจะเริ่มต้นเรียงจากเลขที่เราใส่ในบรรทัดแรก อย่างเช่นในตัวอย่าง ผมใส่เลข1เป็นบรรทัดแรก Markdown ก็จะเริ่มเรียงให้เป็น1. 2. 3. ~ 7.แต่ถ้าผมใส่เลข3ก็จะเรียงให้เป็น3. 4. 5. ~ 9.เป็นต้น

1. Sunday
2. Monday
8. Tuesday
1. Wednesday
1. Thursday
1. Friday
1. Saturday

3. แบบลิสต์ซ้อนลิสต์ (Nested list)

Markdown แบบลิสต์ซ้อนลิสต์ สามารถนำสัญลักษณ์-, *มาใช้รวมกันได้ นอกจากนี้ยังสามารถนำมาใช้รวมกับตัวเลขได้อีกด้วย

* Phone
    * samsung
    * IPhone
        * IPhone 11
        * IPhone 11 Pro
- computer
    - CPU
        - AMD
        - Intel
* Hello
    - Welcome
        - Thailand
        * Japan
- Car
    * Toyota
        1. Vigo
        2. Revo
    * Isuzu
        1. All New
        2. D-Max
1. Sunday
    * Red
        - Hello
2. Monday
    - Yellow
        - Hello

รูปแบบตัวอักษร (Font Style)

1. ตัวหนา (Bold)

__This is Bold__
**This is Bold**

2. ตัวเอียง (Italics)

_This is Italics_
*This is Italics*

ในกรณีที่ต้องการใส่*ทั้งด้านหน้าและด้านหลัง เช่น*This is text not italics*ให้ใส่ตามนี้

\*This is text not italics\*

3. ตัวหนา + ตัวเอียง (Bold + Italics)

***This is Bold and Italics***
___This is Bold and Italics___

การขีดฆ่าตัวอักษร (Strikethrough)

1. ขีดฆ่าธรรมดา (Strikethrough)

~~This is Strikethrough~~

2. ขีดฆ่า + ตัวหนา + ตัวเอียง (Strikethrough + Bold + Italics)

// 2.1 ขีดฆ่า + ตัวหนา
**~~This is Strikethrough and Bold~~**
__~~This is Strikethrough and Bold~~__

// 2.2 ขีดฆ่า + ตัวเอียง
_~~This is Strikethrough and Italics~~_
*~~This is Strikethrough and Italics~~*

// 2.3 ขีดฆ่า + ตัวหนา + ตัวเอียง
***~~This is Strikethrough and Bold and Italics~~***

การเน้นตัวอักษร (Highlight)

การเน้นตัวอักษร สามารถใช้ได้ทั้ง ```Text``` และ `Text`

Use ```File Read.md```
หรือ
Program `Laravel` and `PHP`

ลิงก์ (Link)

1. ใส่ลิงก์เว็บไซต์ (Link Website)

// บริษัท Classmethod (Thailand)
[บริษัท Classmethod](https://www.classmethod.co.th/)
// Google
[Google](https://www.google.co.th/)
// YouTube
[YouTube](https://www.youtube.com/)

2. ใส่ลิงก์รูปภาพ (Link Image)

// บริษัท Classmethod (Thailand)
![บริษัท Classmethod (Thailand)](https://dev.classmethod.jp/wp-content/uploads/2020/04/logo_black-960x504.png)
// Cookiebot
![Cookiebot](https://dev.classmethod.jp/wp-content/uploads/2020/11/Cookiebot-1200x630-1-960x504.png)
// AWS
![AWS](https://cdn-ssl-devio-img.classmethod.jp/wp-content/uploads/2019/11/aws-eyecatch-960x504.png)

Output Link Images

3. ใส่ลิงก์หัวข้อ (Link Header)

# Link Header
* [Link Year](#year)
* [Link Month](#month)
* [Link Day](#day)
* [Link Date Time](#date-time)

# Year
- 2021
- 2022
- 2023
- 2024
- 2025
- 2026

# Month
1. Jan
2. Feb

# Day
1. Sunday
2. Monday
3. Tuesday

# Date Time
1. datetime
2. string
3. timestamps

ไฮไลท์โค้ด (Highlight Code)

```js
console.log('hello');
```

```python
def area(w, h):
    return w * h
```

```ruby
# The Greeter class
class Greeter
  def initialize(name)
    @name = name.capitalize
  end

  def salute
    puts "Hello #{@name}!"
  end
end
```

```css
h1 {
    color: blue;
}
```

```yml
version: '3.7'

services:
  # NGINX - Service
  web:
    image: nginx:alpine
    container_name: web_pc
    restart: always
    tty: true
    ports:
      - "7070:80"
    volumes:
      - ./server:/var/www
      - ./docker/nginx/conf.d/:/etc/nginx/conf.d/
    networks:
      - pc-network
```

console.log('hello');

def area(w, h):
    return w * h

# The Greeter class
class Greeter
  def initialize(name)
    @name = name.capitalize
  end

  def salute
    puts "Hello #{@name}!"
  end
end

h1 {
    color: blue;
}

version: '3.7'

services:
  # NGINX - Service
  web:
    image: nginx:alpine
    container_name: web_pc
    restart: always
    tty: true
    ports:
      - "7070:80"
    volumes:
      - ./server:/var/www
      - ./docker/nginx/conf.d/:/etc/nginx/conf.d/
    networks:
      - pc-network

นอกจากนี้ ยังสามารถเลือกการใช้งานที่รองรับ Syntax Highlight ได้ที่ Syntax Highlight Support

Cucumber ('*.feature')
abap ('*.abap')
ada ('*.adb', '*.ads', '*.ada')
ahk ('*.ahk', '*.ahkl')
apacheconf ('.htaccess', 'apache.conf', 'apache2.conf')
applescript ('*.applescript')
as ('*.as')
as3 ('*.as')
asy ('*.asy')
bash ('*.sh', '*.ksh', '*.bash', '*.ebuild', '*.eclass')
bat ('*.bat', '*.cmd')
befunge ('*.befunge')
blitzmax ('*.bmx')
boo ('*.boo')
brainfuck ('*.bf', '*.b')
c ('*.c', '*.h')
cfm ('*.cfm', '*.cfml', '*.cfc')
cheetah ('*.tmpl', '*.spt')
cl ('*.cl', '*.lisp', '*.el')
clojure ('*.clj', '*.cljs')
cmake ('*.cmake', 'CMakeLists.txt')
coffeescript ('*.coffee')
console ('*.sh-session')
control ('control')
cpp ('*.cpp', '*.hpp', '*.c++', '*.h++', '*.cc', '*.hh', '*.cxx', '*.hxx', '*.pde')
csharp ('*.cs')
css ('*.css')
cython ('*.pyx', '*.pxd', '*.pxi')
d ('*.d', '*.di')
delphi ('*.pas')
diff ('*.diff', '*.patch')
dpatch ('*.dpatch', '*.darcspatch')
duel ('*.duel', '*.jbst')
dylan ('*.dylan', '*.dyl')
erb ('*.erb')
erl ('*.erl-sh')
erlang ('*.erl', '*.hrl')
evoque ('*.evoque')
factor ('*.factor')
felix ('*.flx', '*.flxh')
fortran ('*.f', '*.f90')
gas ('*.s', '*.S')
genshi ('*.kid')
glsl ('*.vert', '*.frag', '*.geo')
gnuplot ('*.plot', '*.plt')
go ('*.go')
groff ('*.(1234567)', '*.man')
haml ('*.haml')
haskell ('*.hs')
html ('*.html', '*.htm', '*.xhtml', '*.xslt')
hx ('*.hx')
hybris ('*.hy', '*.hyb')
ini ('*.ini', '*.cfg')
io ('*.io')
ioke ('*.ik')
irc ('*.weechatlog')
jade ('*.jade')
java ('*.java')
js ('*.js')
jsp ('*.jsp')
lhs ('*.lhs')
llvm ('*.ll')
logtalk ('*.lgt')
lua ('*.lua', '*.wlua')
make ('*.mak', 'Makefile', 'makefile', 'Makefile.*', 'GNUmakefile')
mako ('*.mao')
maql ('*.maql')
mason ('*.mhtml', '*.mc', '*.mi', 'autohandler', 'dhandler')
markdown ('*.md')
modelica ('*.mo')
modula2 ('*.def', '*.mod')
moocode ('*.moo')
mupad ('*.mu')
mxml ('*.mxml')
myghty ('*.myt', 'autodelegate')
nasm ('*.asm', '*.ASM')
newspeak ('*.ns2')
objdump ('*.objdump')
objectivec ('*.m')
objectivej ('*.j')
ocaml ('*.ml', '*.mli', '*.mll', '*.mly')
ooc ('*.ooc')
perl ('*.pl', '*.pm')
php ('*.php', '*.php(345)')
postscript ('*.ps', '*.eps')
pot ('*.pot', '*.po')
pov ('*.pov', '*.inc')
prolog ('*.prolog', '*.pro', '*.pl')
properties ('*.properties')
protobuf ('*.proto')
py3tb ('*.py3tb')
pytb ('*.pytb')
python ('*.py', '*.pyw', '*.sc', 'SConstruct', 'SConscript', '*.tac')
rb ('*.rb', '*.rbw', 'Rakefile', '*.rake', '*.gemspec', '*.rbx', '*.duby')
rconsole ('*.Rout')
rebol ('*.r', '*.r3')
redcode ('*.cw')
rhtml ('*.rhtml')
rst ('*.rst', '*.rest')
sass ('*.sass')
scala ('*.scala')
scaml ('*.scaml')
scheme ('*.scm')
scss ('*.scss')
smalltalk ('*.st')
smarty ('*.tpl')
sourceslist ('sources.list')
splus ('*.S', '*.R')
sql ('*.sql')
sqlite3 ('*.sqlite3-console')
squidconf ('squid.conf')
ssp ('*.ssp')
tcl ('*.tcl')
tcsh ('*.tcsh', '*.csh')
tex ('*.tex', '*.aux', '*.toc')
text ('*.txt')
v ('*.v', '*.sv')
vala ('*.vala', '*.vapi')
vbnet ('*.vb', '*.bas')
velocity ('*.vm', '*.fhtml')
vim ('*.vim', '.vimrc')
xml ('*.xml', '*.xsl', '*.rss', '*.xslt', '*.xsd', '*.wsdl')
xquery ('*.xqy', '*.xquery')
xslt ('*.xsl', '*.xslt')
yaml ('*.yaml', '*.yml')

ตาราง (Tables)

1. แบบจัดเรียงคอลัมน์ตาราง (Sort Column Table)

การจัดเรียงคอลัมน์ตาราง เราจะใช้สัญลักษณ์|และ-เพื่อทำการสร้างตารางหรือเป็นการสร้างตารางโดยการใช้ Markdown ซึ่งในการสร้างตารางเราสามารถใช้สัญลักษณ์-แบบนี้กี่อันก็ได้ นอกจากนี้เรายังสามารถจัดคอลัมน์ ชิดซ้าย, กึ่งกลาง, ชิดขวา ได้โดยใช้ลัญลักษณ์ดังนี้

:---- => ชิดซ้าย
:---: => กึ่งกลาง
----: => ชิดขวา

เราสามารถจัดเรียงคอลัมน์ได้ตามใจชอบ ซึ่งตัวอย่างด้านล่างนี้จะเป็นการจัดเรียงคอลัมน์สไตล์ผมเองครับ

| Table Lift Title | Table Center Title | Table Right Title |
| :--------------- | :----------------: | ----------------: |
| left 1           | center 1           | right 1           |
| left 2           | center 2           | right 2           |
| left 3           | center 3           | right 3           |
| left 4           | center 4           | right 4           |
| left 5           | center 5           | right 5           |

2. แบบไม่จัดเรียงคอลัมน์ตาราง (Not Sort Column Table)

| Table Lift Title | Table Center Title | Table Right Title |
| ---------------- | ------------------ | ----------------- |
| left 1           | center 1           | right 1           |
| left 2           | center 2           | right 2           |
| left 3           | center 3           | right 3           |
| left 4           | center 4           | right 4           |
| left 5           | center 5           | right 5           |

เช็กบล็อก (Check Box)

- [x] Check Box 1  
- [ ] Check Box 2
- [ ] Check Box 3
- [x] Check Box 4

มาร์ค (Mark)

<mark>This is marked text</mark>

อ้างอิง (Reference)

> อ้างอิง 1
>> อ้างอิง 2
>>> อ้างอิง 3
>>>> อ้างอิง 4
>>>>> อ้างอิง 5
>>>>>> อ้างอิง 6

Output Reference

เส้นคั่น (Seperator bar)

---
---
---
---
---
---

การเว้นบรรทัด (Newline)

การเว้นบรรทัด ให้เคาะสเปซบาร์ (Spacebar) ข้างหลังข้อความ 2 ครั้งเพื่อขึ้นบรรทัดใหม่

การเว้นวรรคบรรทัดที่ 1--
การเว้นวรรคบรรทัดที่ 2--
การเว้นวรรคบรรทัดที่ 3--

// !หมายเหตุ: "--" มีค่าเท่ากับเคาะสเปซบาร์ 2 ครั้ง

คอมเม้นต์มาร์กดาวน์ (Comment Markdown)

การคอมเม้นต์มาร์กดาวน์ เราจะใส่โค้ดและใส่ข้อความลงในแพลตฟอร์มที่เราใช้เขียนบล็อก จากนั้นโค้ดและข้อความที่ใส่ลงไป จะแสดงแค่ในแพลตฟอร์มที่เราใช้เขียนบล็อกเท่านั้น และหลังจากที่ทำการ Preview ไปแล้ว โค้ดและข้อความจะไม่แสดงในหน้า Preview

[Header]: <> (This is Header)
[Table]: # (This is Table)

สรุป (Summary)

Markdown ทั้งหมดในบล็อกนี้ ผมได้นำไปทดสอบใน โปรแกรม Visual Studio Code หรือ Website Markdown Live Preview Online และ Website Github Gist จากนั้นได้รวบรวม Markdown ที่น่าสนใจมาเขียนในบล็อกนี้มากมาย แต่ Markdown ที่ผมรวบรวมมาทั้งหมดนี้ก็มีข้อเสียเช่นกัน คือแพลตฟอร์มที่ใช้เขียนบล็อกแต่ละอันจะไม่สามารถรองรับการใช้ Markdown ได้ทั้งหมด อย่างเช่น ถ้าเราใช้ แพลตฟอร์ม WordPress เขียนบล็อก ก็จะมี Feature Markdown บางอันที่ใช้ไม่ได้ แต่เราสามารถแก้ปัญหาโดยการใช้ Code HTML แทน Markdown ได้ครับ